<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #imageBox{
            position: relative;
        }
        #cutBox{
            width: 150px;
            height: 150px;
            border: 1px solid red;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
<h1>头像上传</h1>
<input id="upload" type="file">
<div id="imageBox">
    <canvas id="myCanvas" width="400" height="400" style="border: 1px solid black"></canvas>
    <div id="cutBox"></div>
</div>
<button id="uploadBtn">上传</button>
<div>
    <h1>预览</h1>
    <canvas id="newCanvas" width="400" height="400" style="border: 1px solid green"></canvas>
</div>
<img id="myImg" alt="">
<script  src="js/jquery-1.11.3.js"></script>
<script src="js/Zxindex.js"></script>

</body>
</html>